<script setup lang="ts">

import {SetGroupQuestion} from "../../../../generated";
import {useRoute, useRouter} from "vue-router";
import {computed} from 'vue';
import {eventBus} from '../../../utils/eventBus'
import QuestionStatus from "./QuestionStatus.vue";

interface DifficultyInfo {
  type: string;
  value: string;
}

interface DifficultyMap {
  [key: number]: DifficultyInfo;
}

const difficultyMap: DifficultyMap = {
  0: {type: "success", value: "简单"},
  1: {type: "warning", value: "中等"},
  2: {type: "danger", value: "困难"}
};

let props = defineProps<{
  title?: string;
  questions?: SetGroupQuestion[];
  showTags: boolean;
}>();

let router = useRouter();
let route = useRoute();

const handleClick = (id: string) => {
  if (route.path.startsWith('/question/detail')) {
    let envId = route.query.envId;
    router.push("/question/detail/" + id + "?mode=study-plan&envId=" + envId);
    eventBus.emit('closeTab')
  } else {
    router.push("/question/detail/" + id + "?mode=study-plan&envId=" + route.params.id);
  }
}

const titleMarginBottom = computed(() => props.showTags ? '8px' : '0')

const currentQuestionId = computed(() => {
  if (route.path.startsWith('/question/detail')) {
    return route.params.id
  }
  return null
})

const isCurrentQuestion = (questionId: string) => {
  return currentQuestionId.value && questionId === currentQuestionId.value
}
</script>

<template>
  <div class="question-list">
    <div class="content">
      <div class="questions">
        <div class="section-title">
          <span class="submission-title">{{ props.title }}</span>
        </div>
        <div v-for="(question, qIndex) in props.questions"
             :key="qIndex"
             class="question-item"
             :class="{ 'current-question': isCurrentQuestion(question.id as string) }"
             @click="handleClick(question.id as string)">
          <div class="question-status">
            <question-status :status="question.status"/>
          </div>
          <div class="question-content">
            <div class="question-info">
              <div class="question-title">{{ question.title }}</div>
              <div v-if="showTags && question.tagList?.length" class="question-tags">
                <span v-for="tag in question.tagList"
                      :key="tag"
                      class="tag">
                  {{ tag }}
                </span>
              </div>
            </div>
            <div class="difficulty"
                 :class="{ 
                   'easy': question.difficulty === 0,
                   'medium': question.difficulty === 1,
                   'hard': question.difficulty === 2
                 }">
              {{ difficultyMap[question.difficulty].value }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.question-list {
  margin-top: 40px;
}

.question-section {
  margin-bottom: 40px;
}

.section-title {
  height: 40px;
  padding: 0 16px;
  background-color: #0000000D;
  display: flex;
  align-items: center;
}

.submission-title {
  color: #1A1A1A;
  font-size: 12px;
}

.questions {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.question-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  transition: background-color 0.2s;
  border-bottom: 1px solid #eee;
}

.question-item:hover {
  cursor: pointer;
  background-color: #00000014;
}

.question-item:last-child {
  border-bottom: none;
}

.question-status {
  margin-right: 16px;
  display: flex;
  align-items: center;
}

.question-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.question-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.question-title {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 14px;
  margin-bottom: v-bind(titleMarginBottom);
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 2px 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}

.difficulty {
  font-size: 12px;
  color: #67c23a; /* 简单-绿色 */
  white-space: nowrap;
}

.difficulty.medium {
  color: #e6a23c; /* 中等-黄色 */
}

.difficulty.hard {
  color: #f56c6c; /* 困难-红色 */
}

.question-item.current-question {
  background-color: #e6f4ff;
  border-left: 4px solid #1890ff;
  padding-left: 16px;
}

.question-item.current-question:hover {
  background-color: #e6f4ff;
}
</style> 